<html>

<style>
    * {
        margin: 0;
    }

    #content {
        color: white;
        position: absolute;
        left: -20px;
        top: -10px;
        white-space: pre-wrap;
        height: 200px;
        overflow: auto;
    }
</style>

<script type="importmap">
	{
	  "imports": {
		"three": "../../three.js-r151/build/three.module.js",
		"three/addons/": "../../three.js-r151/examples/jsm/"
	  }
	}
</script>

<body>
    <div id="content">

    </div>
    <div id="canvas"></div>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // 1. 必须创建的三大件
        // 1.1 三维场景Scene, 类似创建了个世界，三维世界
        const scene = new THREE.Scene();
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({ color: 'yellow' });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // 添加辅助坐标系
        const axesHelper = new THREE.AxesHelper(5);
        scene.add(axesHelper);

        // 1.2 相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(3, 3, 3)

        // 1.3 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        let canvasDom = document.getElementById("canvas");
        canvasDom.appendChild(renderer.domElement);

        function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render)
        }
        render();

        // 2. 设置相机控件轨道控制器OrbitControls
        new OrbitControls(camera, canvasDom);

        // 3. 绘制圆弧
        const geometry1 = new THREE.BufferGeometry(); //创建一个几何体对象
        const R = 2; //圆弧半径
        const N = 10; //分段数量
        // const sp = 1 * Math.PI / N; //半圆弧
        const sp = 2 * Math.PI / N;//两个相邻点间隔弧度
        // 2.1 批量生成圆弧上的顶点数据
        const arr = [];
        for (let i = 0; i < N + 1; i++) {
            const angle = sp * i;//当前点弧度
            // 以坐标原点为中心，在XOY平面上生成圆弧上的顶点数据
            const x = R * Math.cos(angle);
            const y = R * Math.sin(angle);
            arr.push(x, y, 0);
        }
        //类型数组创建顶点数据
        const vertices = new Float32Array(arr);
        // 创建属性缓冲区对象
        //3个为一组，表示一个顶点的xyz坐标
        const attribue = new THREE.BufferAttribute(vertices, 3);
        // 设置几何体attributes属性的位置属性
        geometry1.attributes.position = attribue;

        // 线材质
        const material1 = new THREE.LineBasicMaterial({
            color: 'white'
        });

        // 使用Line渲染圆弧线会有一个缺口，不完全闭合，使用LineLoop可以封闭最后缺口？ line完全看不到呢
        // 创建线模型对象   构造函数：Line、LineLoop、 LineSegments
        // const line = new THREE.Line(geometry, material); 
        const line = new THREE.LineLoop(geometry1, material1);
        // const line = new THREE.LineSegments(geometry1, material1);
        scene.add(line)



    </script>
</body>

</html>